<template>
    <div class="mine">
        <div class="userInfo">
            <va-avatar class="headImg" src="https://randomuser.me/api/portraits/women/5.jpg" />
            <div style="float: left;margin-top: 58px;margin-left: 12px;">
               <p style="color: white;font-weight: bold;">zhiyu's 个人空间</p> 
               <p style="color: white;font-size: xx-small;margin-top: 9px;color: gray;">个性签名</p> 
            </div>
            <va-avatar icon="star_border" size="38px" color="secondary" style="margin-left: 50px;"/>
            <va-avatar icon="book" size="38px" color="secondary" style="margin-left: 15px;"/>
        </div>
        <div class="userMore">
            <div style="height:50px;margin-bottom: 10px;margin-right: 18px;">
                <va-button text-color="white" color="black">我的作品</va-button>
                <div v-for="(item,index) in info" :key="index" class="div1">
                    <p style="font-weight: bold;">{{item.name}}</p>
                    <p style="color: rgba(128,128,128,0.5);font-size: 12px;margin-top: 3px;">{{item.count}}</p>
                </div>
            </div>
            <div class="userPhoto" v-for="(item,index) in MyPhoto" :key="index">
                <van-grid square :column-num="2" :gutter="8">
                    <van-grid-item v-for="(picItem,picIndex) in item.pic" :key="picIndex" >
                        <van-image :src="picItem"/>
                    </van-grid-item>
                </van-grid>
                <va-card-title style="height:20px;font-size:14px;font-weight: bold;">{{item.title}}</va-card-title>
            </div>
        </div>
    </div>
</template>

<script>
import {reactive,toRefs} from 'vue'
export default{
    setup() {
        const other2=require('../../assets/other2.png')
        const other3=require('../../assets/other3.png')
        const other4=require('../../assets/other4.png')
        const other5=require('../../assets/other5.png')
        const jiaju1=require('../../assets/jiaju/jiaju1.png')
        const jiaju2=require('../../assets/jiaju/jiaju2.png')
        const jiaju3=require('../../assets/jiaju/jiaju3.png')
        const jiaju4=require('../../assets/jiaju/jiaju4.png')
        const fj1=require('../../assets/fengjing/fj1.png')
        const fj2=require('../../assets/fengjing/fj2.png')
        const fj3=require('../../assets/fengjing/fj3.png')
        const fj4=require('../../assets/fengjing/fj4.png')
        const fl1=require('../../assets/weifenlei/fl1.png')
        const fl2=require('../../assets/weifenlei/fl2.png')
        const fl3=require('../../assets/weifenlei/fl3.png')
        const fl4=require('../../assets/weifenlei/fl4.png')
        const state=reactive({
            info:[
                {
                    name:"Follow",
                    count:122
                },{
                    name:"Like",
                    count:200
                },{
                    name:"Fans",
                    count:50
                }
            ],
            MyPhoto:[{
                    title:'夜景',
                    pic:{
                        other2,other3,other4,other5,
                    }  
                },{
                    title:'家具',
                    pic:{
                        jiaju1,jiaju2,jiaju3,jiaju4
                    }
                },{
                    title:'风景',    
                    pic:{
                        fj1,fj2,fj3,fj4
                    }
                },
                {
                    title:'未分类',
                    pic:{
                            fl1,fl2,fl3,fl4
                    }
                }
            ]
        })
        return {
            ...toRefs(state),
            other2,other3,other4,other5,
            jiaju1,jiaju2,jiaju3,jiaju4,
            fj1,fj2,fj3,fj4

        }
    }
}
</script>

<style scoped>
.mine{
    width: 375px;
    height: 610px;
    background: #000; 
}
.userInfo{
    width: 340px;
    margin: 0 auto;
    height: 130px;
}
.userMore{
    width: 375px;
    height: 485px;
    background: white;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    overflow: auto;
    animation: slideInUp;
    animation-duration: 1s;
}
.van-grid{
    width: 175px;
    height: 162px;
}
.userPhoto{
    margin-top: 8px;
    margin-left: 8px;
    float: left;
}
.headImg{
    margin-top: 55px;
    margin-left: 5px;
    float: left;
}
.va-avatar{
    margin-top: 55px;
}
.va-button{
    font-size: 12px;
    margin-top: 15px;
    margin-left: 20px;
    margin-bottom: 20px; 
}
.div1{
    float:right;
    margin-top: 19px;
    margin-right: 18px;
    width: 35px;
    text-align: center;
}
.van-image{
    width: 78px;
    height: 78px;
    border-radius: 10px;
    object-fit: cover;
}
</style>